<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家属慢性病花名册</title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/html/module/yumenyoutian/js/api.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


</head>
<body>

<div id="app">
    <!-- 查询表单 -->
    <el-form
            :inline="true"
            size="small"
            :model="formData"
            class="demo-form-inline"
    >
        <el-form-item label="录入日期"  >
            <el-col :span="11">
                <el-date-picker
                        type="date"
                        placeholder="开始日期"
                        v-model="formData.start"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-date-picker
                        type="date"
                        placeholder="结束日期"
                        v-model="formData.end"
                        style="width: 100%"
                        value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-col>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="toQuery">查询</el-button>
            <el-button type="primary" plain @click="printHtml">报表打印</el-button>
        </el-form-item>
    </el-form>

    <!-- 每页数据数量一定，最后一页需要显示合计 -->
    <div id="printListRoster">
        <div style="break-after: page;">
            <table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%; font-size: 10px;">

                <thead>
                    <tr>
                        <td colspan="8">
                            <p style="font-size: 20px;text-align: center">家属人员慢性病花名册</p>
                            <p style="font-size: 14px;line-height: 5px;text-align: center;">
                                <font style="display: inline-block;width: 42%;text-align: left;" >编制单位：公共事务中心医疗保险中心</font>
                                <font style="display: inline-block;width: 57%;text-align: left;">{{time_qj}}</font>
                            </p>
                        </td>
                    </tr>
                </thead>

                <tbody>
                <tr>
                    <th align="center" >序号</th>
                    <th align="center" >单位编号/名称</th>
                    <th align="center" >亲属编号</th>
                    <th align="center" >公民身份号码</th>
                    <th align="center" >姓名</th>
                    <th align="center" >联系方式</th>
                    <th align="center" >特殊病病种</th>
                    <th align="center" >分类</th>
                </tr>

                <tr v-for="(item,index) in list">
                    <td align="center">{{item.rw}}</td>
                    <td align="center">{{item.aab001}}</td>
                    <td align="center">{{item.pcc001}}</td>
                    <td align="center">{{item.aac002}}</td>
                    <td align="center" style="width: 120px;">{{item.aac003}}</td>
                    <td align="center">{{item.aae007}}</td>
                    <td align="center">{{item.kni043}}</td>
                    <td align="center" v-if="item.kaa003 == '1'">Ⅰ</td>
                    <td align="center" v-if="item.kaa003 == '2'">Ⅱ</td>
                    <td align="center" v-if="item.kaa003 == '3'">Ⅲ</td>
                    <td align="center" v-if="item.kaa003 == '4'">Ⅳ</td>
                    <td align="center" v-if="item.kaa003 == '5'">Ⅴ</td>

                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>

<script>


    var vm = new Vue({
        el: "#app",
        data() {
            return {
                // 表格数据
                list: [],
                time_qj: "",
                time:"",
                formData:{start:"",end:""},
            };
        },
        created(){
            this.init();
        },
        methods: {
            init(){
                const res = renderTime(new Date(),"yyyy-MM-dd");
                let date_str = res.split("-");
                this.formData.start = date_str[0]+"-"+date_str[1]+"-01";
                this.formData.end = res;
            },
            printHtml() {
                $("#printListRoster").print();
            },
            async toQuery(){
                load();
                const res = await postWebCustom(getTableId("2021"),this.formData);
                layer.closeAll();
                if(res.code == 0){
                    top.alert(res.msg);
                    return;
                }
                this.list = res.data.listda;
                this.time_qj = res.data.time_qj;
            },
            // 获取表格数据
            setData(data) {
                this.list1 = data[0];
                this.list2 = data[1];
                this.title = data.title;
            },
            //   打印方法
            goPrint() {
                printJS({
                    printable: "printListRoster",
                    type: "html",
                    // 表格表头较复杂且每页要显示审核人等信息，所以不能用json数据打印
                    // properties: [
                    //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                    //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                    // ],
                    // header: `<div style="font-size:30px;text-align:center;"> 玉门油田企业员工补充医疗保险结算单 </div>`,
                    style: "@media print{@page {size:landscape}}",
                    // gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                    // gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                    // repeatTableHeader: true,
                    scanStyles: false,
                    targetStyles: ["*"],
                    ignoreElements: ["no-print"],
                });
            },
            // 关闭窗口
            handleClose() {
                this.remoteClose();
            },
        },
    });

    function setData(data) {
        vm.setData(data);
    }
</script>
</body>
</html>